<template>
	<!-- 使用 page-meta 组件配合阻止滚动穿透 ,page-meta一定作为页面的第一个节点-->
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view>
		<uni-popup ref="timePopup" type="bottom" @change="changePop" :safeArea="false">
			<view class="popup-content">
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

		<view class="date-row">
			<view class="left" @click="selectTime">
				<text>{{year}}年{{month}}月</text>
				<uni-icons type="bottom" size="25"></uni-icons>
			</view>
			<!-- 	<view class="right">
				<button type="default"><text>全部记录</text>
					<uni-icons type="tune" size="26"></uni-icons>
				</button>
			</view> -->
		</view>

		<view class="list-view">
			<image src="../../../static/empty_img/obj_empty.png" style="width: 100%;margin-top: 30%;" mode="widthFix"
				v-if="record_list.length==0"></image>
			<uni-list v-else>
				<uni-list-item clickable="true" v-for="(item ,index) in record_list" :key="index">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" :src="item.img" mode="aspectFill"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="body">
							<text class="op_text">{{item.op_msg}}</text>
							<text class="time_text">{{item.time}}</text>
						</view>
					</template>
					<template v-slot:footer>
						<view class="footer">
							<text>{{item.op_num+''+item.unit}}</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>

		<view class="scroll-btn" v-if="floorStatus" @click="scollToTop">
			<iconfont :name="'scroll_top'" :size="80" :color="'rgb(194, 199, 206,0.3)'"></iconfont>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			return {
				fid: '',
				years,
				year,
				months,
				month,
				value: [9999, month - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				show: false,
				all_record: [],
				record_list: [],
				floorStatus: false
			}
		},

		onLoad(options) {
			this.fid = options.fid
			this.load()
		},

		onPullDownRefresh() {
			this.load()
			uni.stopPullDownRefresh()
		},

		onPageScroll(e) {
			if (e.scrollTop > 100)
				this.floorStatus = true
			else this.floorStatus = false
		},

		methods: {

			load() {
				this.getRecord()
				uni.showLoading({
					mask: true
				})
				setTimeout(() => {
					if (this.all_record.length > 0)
						this.record_list = this.all_record.find(({
							month
						}) => month == this.month).record_list
					else this.record_list = []
					uni.hideLoading()
				}, 500)
			},

			// 请求
			async getRecord() {
				this.all_record = await uni.$api.fridge.getAllRecord(this.fid)
			},

			// 事件处理
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				const _record_list = this.all_record.find(({
					month
				}) => month == this.month)
				this.record_list = _record_list ? _record_list.record_list : []
			},
			selectTime() {
				this.$refs.timePopup.open()
			},
			changePop(e) {
				this.show = e.show
			},
			scollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
		}
	}
</script>

<style lang="scss">
	.date-row {
		padding: 10px;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		// background-color: #fff;
		// border-bottom: 1rpx solid #000;
		height: 25px;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
		}

		.right {
			font-size: 30rpx;
			border-radius: 100px;
			overflow: hidden;

			>button {
				background-color: #e3e3e3;
				line-height: 1;
				padding: 10rpx 10rpx;
				display: flex;
				align-items: center;
			}
		}
	}

	.list-view {

		.body {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			flex: 1;

			.op_text {
				font-size: 30rpx;
			}

			.time_text {
				font-size: 25rpx;
				color: #959ea8;
			}
		}

		.footer {
			font-size: 30rpx;
			display: flex;
			align-items: center;
		}

		.slot-image {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			margin-right: 10rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 0;

		.picker-view {
			width: 750rpx;
			height: 600rpx;
			margin-top: 20rpx;

			.item {
				line-height: 100rpx;
				text-align: center;
			}
		}
	}

	.scroll-btn {
		position: fixed;
		bottom: 50rpx;
		right: 30rpx;
	}
</style>